<template>
    <div class="animation-box" v-if="animation">
      <div class="yun-animation">
        <span v-for="(item,i) in bagColor" 
          :style="`background:${item}; animation-delay:${-((0.9) - (0.1 * i))}s; animation-duration: ${duration}s`" 
          :key="i" 
          >
        </span>
      </div>
    </div>
  </template>
  
  <script>
  /* 
  加载动画组件 
  animation: 为 true时展示动画, false关闭动画
  bagColor: 动画背景颜色, 和生成动态sapn元素个数
  duration: 值越小, 动得越快, 反之越慢
  */
  export default {
    name: 'cxyLoadingAnimation',
    props: {
      animation: {
        type: Boolean,
        required: true,
        default: () => true,
      },
      bagColor: {
          type: Array,
          default: () => {
              return ['#2ecc71','#3f1893','#820d41','#137b3e','#c0b711', '#b44d19'];
          },
      },
      duration: {
          type: Number,
          default: 1.2,
      },
    },
    data() {
      return {}
    },
  }
  </script>
  
  <style scoped>
  .animation-box {
    position: fixed;
    display: flex;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    justify-content: center;
    /* align-content: center; */
    align-items: center;
    opacity: 0.9;
    z-index: 1000;
  }
  
  .yun-animation > span {
    display: inline-block;
    margin-left: 0.5em;
    width: 0.6em;
    height: 2.5em;
    animation-name: scale;
    /* 循环 */
    animation-iteration-count: infinite;
    /* animation-duration: 1.2s; */
  }
  
  @keyframes scale {
    0%,
    40%,
    100% {
      transform: scaleY(0.2);
    }
    20%, 60% {
      transform: scaleY(1);
    }
  }
  </style>